<!-- 设置表头 -->
<template>
  <div class="set_table">
    <div class="cons">
      <div class="title">
        <div class="label">自定义显示</div>
        <div class="close" @click="closeHandler">
          <SvgIcon name="close" width="20px" height="20px" />
        </div>
      </div>
      <div class="main">
        <div class="header bg">
          <div class="label">
            <div class="checkbox">显示</div>
            <div class="text">资产分类</div>
          </div>
          <div class="iocn">拖动调整排序</div>
        </div>
        <Vuedraggable class="draggable" :list="column" :animation="100" item-key="label">
          <template #item="{ element }">
            <div class="header">
              <div class="label">
                <div class="checkbox">
                  <el-checkbox v-model="element.hidden" />
                </div>
                <div class="text">{{ element.label }}</div>
              </div>
              <div class="iocn">
                <SvgIcon name="sort" width="14px" height="14px" />
              </div>
            </div>
          </template>
        </Vuedraggable>
      </div>
      <div class="footer">
        <el-button size="default" @click="defaultHandler"> 恢复默认 </el-button>
        <div class="footer_right">
          <el-button size="default" @click="closeHandler"> 取消 </el-button>
          <el-button type="danger" size="default" @click="submit">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import Vuedraggable from 'vuedraggable'
import { reactive, getCurrentInstance } from 'vue'
import useSettingStore from '@/store/modules/setting'
import columns from './column'
const SettingStore = useSettingStore()
const internalInstance: any = getCurrentInstance()

//  关闭
const closeHandler = () => {
  SettingStore.setTableHeaderShow = !SettingStore.setTableHeaderShow
}
//  获取表头数据
let loc: any = localStorage.getItem('columns')
const index = () => {
  if (loc) {
    loc = JSON.parse(loc)
    return loc[SettingStore.columnName]
  }
  const list: any = columns
  return list[SettingStore.columnName]
}
let column = reactive(index())
//  提交
const submit = () => {
  loc = loc ? loc : columns
  loc[SettingStore.columnName] = column
  localStorage.setItem('columns', JSON.stringify(loc))
  closeHandler()
  SettingStore.setColumn()
}
//  恢复默认
const defaultHandler = () => {
  const list: any = columns
  loc[SettingStore.columnName] = list[SettingStore.columnName]
  localStorage.setItem('columns', JSON.stringify(loc))
  column = list[SettingStore.columnName]
  internalInstance?.ctx.$forceUpdate()
  SettingStore.setColumn()
}

</script>

<style scoped lang="scss">
.set_table {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba($color: #000000, $alpha: 0.5);
  z-index: 99;

  .cons {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 800px;
    background: #FFFFFF;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    border-radius: 5px;

    .title {
      width: 100%;
      height: 56px;
      background-color: #F2F2F2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;

      .label {
        padding-left: 8px;
        border-left: 4px solid #FE1040;
        font-size: 16px;
        font-weight: 600;
        color: #242424;
      }

      .close {
        cursor: pointer;
      }
    }

    .main {
      padding: 20px;

      .header {
        display: flex;
        justify-content: space-between;
        padding: 12px;
        border: 1px solid #EEEDEE;
        border-bottom: none;

        &:last-child {
          border-bottom: 1px solid #EEEDEE;
        }

        &.bg {
          background-color: #F2F2F2;
        }

        .label {
          display: flex;

          .checkbox {
            width: 50px;
            color: #303133;
            font-size: 14px;
            margin-right: 12px;

            .el-checkbox {
              height: 0;
            }
          }

          .text {
            color: #303133;
            font-size: 14px;
            width: 100px;


          }
        }

        .iocn {
          width: 84px;
          text-align: center;
          color: #303133;
          font-size: 14px;
        }
      }

      .draggable {
        max-height: 300px;
        overflow: auto;

        &::-webkit-scrollbar-thumb {
          background-color: #FF0F40;
        }

        &::-webkit-scrollbar-track {
          background-color: #F2F2F2;
        }
      }
    }

    .footer {
      display: flex;
      justify-content: space-between;
      padding: 16px 20px;
      border-top: 1px solid #E8E8E9;
    }
  }
}

::v-deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #FF0F40;
  border-color: #FF0F40;
}
</style>